<template>
	<div class="dialogBox">
		<el-dialog
			v-model="visible"
			:width="width"
			custom-class="dialogWrap"
			:show-close="false"
		>
			<header>
				<div class="title">{{ title }}</div>
				<img
					src="@/assets/icon/common/dialog-close.png"
					alt=""
					@click="close"
				/>
			</header>
			<div class="dialogMain">
				<div class="mainOver">
					<slot name="toast"></slot>
					<slot></slot>
				</div>
				<div class="dialog-footer">
					<el-button @click="visible = false">取消</el-button>
					<el-button type="primary" @click="confirm">
						{{ confirmText }}
					</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
const props = withDefaults(
	defineProps<{
		visible: boolean
		title?: string
		fnConfig?: {
			fn: (...args: any[]) => Promise<void>
			data?: any
		}
		width?: string | number
		confirmText?: string
	}>(),
	{
		fnConfig: {
			fn: async function () {},
			data: 0,
		},
		width: '45%',
		title: '标题',
		confirmText: '确定',
	}
)
const emits = defineEmits<{
	'update:visible': [e: boolean]
	callback: []
	confirm: []
}>()

const visible = computed({
	get: () => {
		return props.visible
	},
	set: (val) => emits('update:visible', val),
})
const close = () => {
	emits('update:visible', false)
}
const confirm = () => {
	emits('confirm')
	const params = props?.fnConfig?.data
	const fnPost = props?.fnConfig?.fn
	if (params) {
		fnPost(params)
			.then(({ code, data: res, msg }) => {
				if (code === 200) {
					ElMessage.success(msg)
					close()
				} else {
					ElMessage.error(msg)
				}
			})
			.catch((err) => ElMessage.error(err.msg))
	} else {
		fnPost()
	}
}
</script>

<style lang="less" scoped>
.dialogBox {
	border-radius: 10px;
	header {
		display: flex;
		justify-content: space-between;
		padding: 14px 18px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
		.title {
			font-weight: 600;
			font-size: 18px;
			color: #000000;
		}
		> img {
			width: 28px;
			height: 28px;
			cursor: pointer;
		}
	}
	.dialogMain {
		padding: 0 18px 18px;
		.mainOver {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100px;
			font-size: 20px;
			color: #000000;
			font-family: Roboto, Roboto;
			font-weight: 500;
		}
		.dialog-footer {
			margin-top: 18px;
			display: flex;
			justify-content: flex-end;
		}
	}
}
</style>
